<template>
  <a-spin size="large" tip="加载中..." :delay="500" :spinning="loading" wrapperClassName="tenantCertification">
    <!-- 场次tabs -->
    <ArrangeTabs
      :activityId="info.id"
      :activityTitle="info.title"
      :arrangeList="info.arrangeList"
      :currentID.sync="currentID"
      @refresh="getData()"
    />
    <!-- 当前场次信息+组 -->
    <ArrangeInfo v-if="currentInfo.id === currentID" :activityId="info.id" :info="currentInfo" :currentID="currentID" @refresh="getData()" />
    <!-- 缺省页 -->
    <div v-if="!currentInfo.id && !loading" class="_mt-50 _mb-50 _pt-50 _pb-50">
      <a-empty description="暂无活动场次" />
    </div>
    <SeatArrangementOverview ref="SeatArrangementOverviewRef" />
  </a-spin>
</template>

<script>
import ArrangeTabs from './components/arrangeTabs.vue'
import ArrangeInfo from './components/arrangeInfo.vue'
import { getActivityArrangeInfo } from '@/api/activity/activity.js'
import SeatArrangementOverview from './components/SeatArrangementOverview.vue'
export default {
  computed: {
    // 当前选中场次信息
    currentInfo() {
      const info = this.info.arrangeList ? this.info.arrangeList.find(v => v.id === this.currentID) : {}
      return info || {}
    }
  },
  components: {
    ArrangeTabs,
    ArrangeInfo,
    SeatArrangementOverview
  },
  data() {
    return {
      info: {},
      currentID: undefined,
      loading: false
    }
  },
  created() {
    this.getData(true)
  },
  methods: {
    // 获取场次信息 isLoading 是否需要loading
    async getData(isLoading) {
      const { query } = this.$route
      if (isLoading) {
        this.loading = true
      }
      
      const { data } = await getActivityArrangeInfo({ activityId: query.id })
      this.info = { ...query, arrangeList: data.activityArrangeVoList }
      if (!this.currentID) {
        this.currentID = this.info.arrangeList.length ? this.info.arrangeList[0].id : undefined
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.tenantCertification {
  min-height: calc(100vh - 185px);
  background: #ffffff;
  padding: 0 24px 15px 24px;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
}
</style>
